<template>
    <div style="padding:45px;">
             <div class="add-top flex p-l">
                <p>所在位置：</p>
                <router-link to='/index/contractoutIndex/contractterms' tag="a">合同</router-link>
                <p><i class="el-icon-arrow-right"></i></p>
                <p>条款添加</p>
            </div>


            <el-form :model="form" class="form-select">
                <el-form-item label="名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off" class="el-select1"></el-input>
                </el-form-item>

                <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input v-model="form.remark" autocomplete="off" class="el-select1"></el-input>
                </el-form-item>

                <el-form-item label="条款内容" :label-width="formLabelWidth">
                  
                </el-form-item>
                
                <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>

                <div class="ueditortitle">条款变量</div>
                <div class="ueditortitle">客户基本信息</div>
                <div class="ueditorlabel">
                    
                    <el-row :gutter="20">
                      <el-col v-for="item in clauselist" :key="item.Id" :span="4"><div class="grid-content bg-purple labellist" @click="returnadd('inserthtml',item.value)">{{item.label}}</div></el-col>
                    </el-row>
                </div>
                <div class="ueditortitle">案件基本信息</div>
                <div class="ueditorlabel">
                    
                    <el-row :gutter="50">
                      <el-col v-for="item in caselistinfo" :key="item.Id" :span="6"><div class="grid-content bg-purple labellist" @click="returnadd('inserthtml',item.value)">{{item.label}}</div></el-col>
                    </el-row>
                </div>

                <div class="ueditortitle">案件律师信息</div>
                <div class="ueditorlabel">
                    <el-col :span="5"><div class="grid-content bg-purple labellist" @click="returnadd('inserthtml','hostlawyer')">主办律师名称</div></el-col>    
                </div>

                <div class="ueditortitle">服务内容</div>
                <div class="ueditorlabel">
                    <el-col :span="5"><div class="grid-content bg-purple labellist" @click="returnadd('inserthtml','servicecontent')">服务内容</div></el-col>
                </div>
                
                <div class="ueditortitle">收费方式</div>
                <div class="ueditorlabel">
                    <el-col :span="5"><div class="grid-content bg-purple labellist" @click="returnadd('inserthtml','chargingmethod')">收费方式</div></el-col>
                </div>


            </el-form>

            <div slot="footer" class="dialog-footer">
            <div class="flex dialogFormVisivleFooter">
                <el-button type="primary" @click="add_Member()" :disabled="isDisabled">保存</el-button>
            </div>
            </div>
        

              


            
           

             
                

    </div>
</template>
<script>
import qs from 'qs';
import Uediter from '@/components/UE.vue';

export default {
    data(){
        return{

            urlid:"",
            form:{
              name:"",
              remark:"",
            },
            dat: {
                content: ''
            },
            ueditor: {
                value: '',
                config: {
                    initialFrameWidth: 750,
                    initialFrameHeight: 320
                }
            },

            formLabelWidth:'',
            isDisabled:false,


            //条款变量
            
              //客户基本信息
              clauselist:[
                {
                  label:"客户类型",
                  value:"nametype",
                },
                {
                  label:"客户名称(中)",
                  value:"name",
                },
                {
                  label:"所属行业",
                  value:"industry",
                },
                {
                  label:"职务",
                  value:"job",
                },
                {
                  label:"纳税人编号",
                  value:"taxpayer",
                },
                {
                  label:"联系电话",
                  value:"telephone",
                },
                {
                  label:"省/市地区",
                  value:"city",
                },
                {
                  label:"是否常年客户",
                  value:"yesorno",
                },
                {
                  label:"详细地址",
                  value:"address",
                },
                {
                  label:"身份证号",
                  value:"carded",
                },
              ],
              //客户基本信息end

              //案件基本信息
              caselistinfo:[
                {
                  label:"选择案件类型",
                  value:"casetype",
                },
                {
                  label:"案件名称",
                  value:"casename",
                },
                {
                  label:"案由",
                  value:"action",
                },
                {
                  label:"受理机关",
                  value:"authority",
                },
                {
                  label:"案情简介",
                  value:"caseinfo",
                },
                {
                  label:"对方当事人",
                  value:"otherparty",
                },
                {
                  label:"标的额",
                  value:"amount",
                },
              ],
              //案件基本信息end

              //案件律师信息
              caseLawyer:[
                {
                  label:"主办律师姓名",
                  value:"lawyername",
                },
              ]
              //案件律师信息end

        }
    },
    methods:{
      returnContent () {
        this.dat.content = this.$refs.ue.getUEContent()
      },
      returnadd(type,text){
        this.$refs.ue.addhtml(type,text)
      },

      add_Member(){
          console.log(this.urlid)
          if(this.urlid == undefined || this.urlid == ""){
              console.log('asd')
              this.dat.content = this.$refs.ue.getUEContent()
              this.$http.post('/yongxu/Document/addContractterms',qs.stringify({
                  User_Id:localStorage.getItem('userId'),
                  terms_name:this.form.name, 
                  terms_content:this.dat.content,
                  note:this.form.remark,
                  Id:this.urlid
              })).then((res)=>{
                  if(res.data.sign == 200){
                    this.$message({
                      message:res.data.msg,
                      type:'success'
                    })
                    this.$router.push({path:'/index/contractoutIndex/contractterms'})
                  }else if(res.data.sign == 300){
                    this.$message({
                      message:res.data.msg,
                      type:'warning'
                    })
                  }else if(res.data.sign == 500){
                    this.$message({
                      message:res.data.msg,
                      type:'warning'
                    })
                  }
              })

          }else{
            console.log('123')
            this.dat.content = this.$refs.ue.getUEContent()
            this.$http.post('/yongxu/Document/updContracttermspreservation',qs.stringify({
                User_Id:localStorage.getItem('userId'),
                template_name:this.form.name, 
                terms_content:this.dat.content,
                note:this.form.remark,
                Id:this.urlid
            })).then((res)=>{
                if(res.data.sign == 200){
                  this.$message({
                    message:res.data.msg,
                    type:'success'
                  })
                  this.$router.push({path:'/index/contractoutIndex/contractterms'})
                }else if(res.data.sign == 300){
                  this.$message({
                    message:res.data.msg,
                    type:'warning'
                  })
                }else if(res.data.sign == 500){
                  this.$message({
                    message:res.data.msg,
                    type:'warning'
                  })
                }
            })
          }
      },

    },
    
    mounted:function(){
       if(this.$route.query.id){
          this.urlid = this.$route.query.id
          this.$http.post('/yongxu/Document/selContracttermsdetails',qs.stringify({
              Id:this.urlid
          })).then((res)=>{
              this.form.name = res.data.terms_name
              this.form.remark = res.data.note
              this.ueditor.value = res.data.terms_content
              this.$refs.ue.upUEContent(this.ueditor.value)
          })
       }
    },

    components:{
      Uediter
    }
    

    
}
</script>
<style lang="scss">
@import '../../assets/sass/main.css';

.input{
    flex-direction: row;
    justify-content: flex-start;
    width: 250px;
    margin-right: 20px;
    border-radius: 45px;
    border: 1px solid #DDDDDD;
    
}
.case-input{
      width:  200px;
    height: 36px;
    /* border: 1px solid #DDDDDD; */
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
   
    padding-left: 21px;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    color: #4a4a4a;
    background-color: transparent;
}
.case-button{
    outline: none;
    width: 48px;
    height: 28px;
    border: none;
    border-radius: 36px 36px 36px 36px;
    background-color: #fefeff;
    margin-right: 4px;
    margin-top: 4px;
    cursor: pointer;
}
 .input:hover{
    border: 1px solid #7E2C2E;
}
.case-button:hover{
    background: #7E2C2E;
    color: #ffffff;
}
.case-child-end2{
    flex-direction: row;
    justify-content:space-between;
}
.selectMenu{
    margin-top: 20px;
}
.export{
  width: 25px;
  height: 25px;
  background: #7E2C2E;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}
.el-table-column--selection .cell{
  padding: 0 !important;
}
// .dingzhi{
//   margin-right:20px;
//   height: 38px;
// }
.el-select1{
  width: 80% !important;
}
.rolearr .el-form-item__label{
  width: 100%;
  text-align: left;
}

.ueditortitle{
  width: 100%;
  margin-top:25px;
  text-align: left;
}
.ueditorlabel{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .labellist{
    border:1px solid #222;
    margin-top:10px;
    text-align: center;
    padding:3px 5px;
    background: #f4f4f4;
    border: 1px solid #dddddd;
    border-radius: 2px;
    cursor: pointer;

  }
  .labellist:hover{
    transition: all 0.6s;
    border: 1px solid #00aeff;
    color:#00aeff
  }
}

.form-select{
  margin-top:30px;
  padding-left: 30px;
}
</style>

